
<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <script type="text/javascript">
    //<![CDATA[

            var demoTreeNodeGridIdString="#demoTreeNodeList";
     		function gridReload(gridId) {
				var urlString = "demoTreeNodeGrid";
				//var groupon = jQuery("#groupon_").val();
				var groupon = jQuery('input[name="groupon_"]').filter(
				':checked').val();
				if(jQuery.type(groupon) === "undefined" || jQuery.type(groupon)==="null")
					groupon="and";
				//var stringField = jQuery("#stringField").val();
				//var intObjField = jQuery("#intObjField").val();

				urlString = urlString + "?groupon_="+groupon;
						//+"&filter_LIKE_stringField="+ stringField;
				// + "&filter_LIKE_dictionary.name=" + dictionaryName;
				urlString = encodeURI(urlString);
				jQuery("#"+gridId).jqGrid('setGridParam', {
					url : urlString,
					page : 1
				}).trigger("reloadGrid");
			}

           
			function toolbarInit(){
    	       jQuery(function (){
		    	  jQuery( "#addRecord" ).button({
			            text: true,
			            icons: {
			                primary: "ui-icon-document"
			            }
			        }).click(function (){
			        	addNewRecord('editDemoTreeNode','demoTreeNodeList','50%','70%');
			        });
			        jQuery( "#modifyRecord" ).button({
			            text: true,
			            icons: {
			                primary: "ui-icon-pencil"
			            }
			        }).click(function (){
			        	editRecord('editDemoTreeNode','demoTreeNodeList','modelId','50%','70%');
			        });
			        jQuery( "#deleteRecords" ).button({
			            text: true,
			            icons: {
			                primary: "ui-icon-scissors"
			            }
			        }).click(function(){
			        	deleteSingelRecord("deleteDemoTreeNode","demoTreeNodeList");
			        }
			        );
			        jQuery( "#searchArea" ).button({
			        	text: true,
			            icons: {
			                primary: "ui-icon-search"
			            }
			        }).click(function(){innerlayout.toggle('north');});
			        jQuery( "#demoTreeNodeRebuild" ).button({
			        	text: true,
			            icons: {
			                primary: "ui-icon-search"
			            }
			        }).click(function(){otherActionCall("rebuildTree","demoTreeNodeList",true);});
			        
			        jQuery( "#displayDemoTree" ).button({
			        	text: true,
			            icons: {
			                primary: "ui-icon-search"
			            }
			        }).click(function(){otherActionCall("demoTree","demoTreeNodeList",true);});
			        
			        
			        
			        
    			});
			}
		
	jQuery(document).ready(function() {
	innerlayout = jQuery(mainLayout.options.center.paneSelector).layout(
						{
							applyDemoStyles : true,
							north__spacing_open:0,
							north__spacing_closed:0,
							//north__togglerLength_open:		0	,		// HIDE the toggler button
							//north__togglerLength_closed:	-1	,		// "100%" OR -1 = full width of pane
							north__togglerAlign_open:"right",//pane打开时，边框按钮显示的位�?  
							north__togglerAlign_closed:"right",//pane关闭时，边框按钮显示的位�?
							center__contentSelector:".ui-layout-content",
							north__initClosed: true,
							north__slidable:false, 
							center__paneSelector : "#inter_center",
							//west__size : '40%', // percentage size expresses as a string
							center__onresize : function() {
							resizeGrid("#demoTreeNodeList",innerlayout.state.center,innerlayout.options.center.paneSelector);
							}
						});
			
			toolbarInit();
			demoTreeNodeGrid = jQuery(demoTreeNodeGridIdString), 
            lastSel = -1, 
            editingRowId = -1;
            demoTreeNodeGrid.jqGrid({
            	url : "demoTreeNodeGrid",
    			datatype : "json",
    			mtype : "GET",
                colModel:[
				{name:'nodeId',index:'nodeId',align:'center',label : '<s:text name="demoTreeNode.nodeId" />',hidden:true,key:true,formatter:'integer'},						
				{name:'nodeName',index:'nodeName',align:'center',label : '<s:text name="demoTreeNode.nodeName" />',hidden:false},						
				 {name:'level',index:'level',align:'center',label : 'level',hidden:false},
				 {name:'parent',index:'parent',align:'center',label : 'parent',hidden:false},
				 {name:'isLeaf',index:'isLeaf',align:'center',label : 'isLeaf',hidden:false},
				 {name:'expanded',index:'expanded',align:'center',label : 'expanded',hidden:false},
				 {name:'lft',index:'lft',align:'center',label : 'lft',hidden:false},
				 {name:'rgt',index:'rgt',align:'center',label : 'rgt',hidden:false}
                ],
                jsonReader : {
    				root : "pageList", // (2)
    				page : "page",
    				total : "total",
    				records : "records", // (3)
    				repeatitems : false
    			// (4)
    			},
               // rowNum:10,
               // rowList:[5,10,20,50,100,200],
                pager: '#demoTreeNodePager',
                gridview:true,
               // rownumbers:true,
                sortname: 'nodeId',
               // viewrecords: true,
                sortorder: 'desc',
                caption:'<s:text name="demoTreeNodeList.title" />',
              //  height:300,
               // gridview:true,
               // rownumbers:true,
               // loadui: "disable",
               // multiselect: true,
				//multiboxonly:true,
				shrinkToFit:false,
				//autowidth:false,
				
				treeGrid: true,
				treeGridModel: "nested",
				ExpandColumn: "nodeName",
                treeIcons: {leaf:'ui-icon-document-b'},
                ExpandColClick: true,
                
                onSelectRow: function(rowid) {
               // alert(rowid);
					},
				 gridComplete:function(){
	               if(jQuery(this).getDataIDs().length>0){
	                  jQuery(this).jqGrid('setSelection',jQuery(this).getDataIDs()[0]);//默认选中第一�?
	                }
	           	} 

            });
            jQuery(demoTreeNodeGrid).jqGrid('bindKeys');
            jQuery(demoTreeNodeGrid).jqGrid('navGrid','#demoTreeNodePager',
            		{edit:false,add:false,del:false,search:false,refresh:false},
            		{},
            		{},
            		{},
            		{multipleSearch:false, multipleGroup:false}
            		); 
           resizeGrid("#demoTreeNodeList",innerlayout.state.center,innerlayout.options.center.paneSelector);
        	jQuery( "button" ).button();
        });
    </script>
 </head>
<body>


<div id="inter_center" class="ui-layout-pane-inter-center">
	<div class="header ui-state-default">
			<div id='toolbar'>
				<button id='addRecord'>
					<s:text name='button.new' />
				</button>
				<button id='modifyRecord'>
					<s:text name='button.modify' />
				</button>
				<button id='deleteRecords'>
					<s:text name='button.delete' />
				</button>
				<button id='searchArea'>
					<s:text name='button.search' />
				</button>
				<button id='demoTreeNodeRebuild'>
					ReBuild Nest Tree
				</button>
				<button id='displayDemoTree'>
					display Tree
				</button>
			</div>
	</div>
	<div class="ui-layout-content">
		<table id="demoTreeNodeList"></table>
		<div id="demoTreeNodePager"></div>
	</div>
</div>
<div id="inter_north" class="pane ui-layout-north">
	<div id="demoTreeNodeListSearchDiv">
			<!-- <input type="text" id="stringField" >-->
			<!-- <input type="text" id="intObjField" > -->
			<input type="radio" id="groupon_"  name="groupon_" value="and"><s:text name="lable.and" /></input><input type="radio" id="groupon_" name="groupon_" value="or"><s:text name="lable.or" /></input>
			<button type="button" onclick="gridReload('demoTreeNodeList')"><s:text name="button.search" /></button>
			<button type="button" onclick="clear_input_elements('demoTreeNodeListSearchDiv');gridReload('demoTreeNodeList')"><s:text name="button.clean" /></button>
	</div>
</div>

</body></html>   
    
